<script setup lang="ts">
import { reactive, ref } from 'vue'

const username = ref('')
const password = ref('')
const userRegex = /^[a-zA-Z0-9_]{3,16}$/;
const passRegex = /^[a-zA-Z0-9]{3,12}$/;

const login = () => {
    if (userRegex.test(username.value)
        && passRegex.test(password.value)) {
        alert(`登录成功 欢迎回来 ${username.value} 你的密码是${password.value}`)
        username.value = ''
        password.value = ''
    }
    else {

        alert('账号密码输入有误')
    }
}
const reset = () => {
    username.value = ''
    password.value = ''
}

</script>


<template>
    <div id="app">
        账户：<input type="text" v-model="username"> <br><br>
        密码：<input type="password" v-model="password"> <br><br>
        <button @click="login">登录</button>
        <button @click="reset" style="margin-left: 20px;">重置</button>
    </div>
</template>

<style></style>